<script setup>
import eventData from './events.json'
import {ref} from "vue";
import {store} from "@/store.js";
const events = ref(eventData)

const activeIndex = ref(1)
const carouselRef = ref(null)
const showEventBtn = ref(true)
const showEvent = ref(false)
const cuteAudioRef = ref(null)
function update() {
  carouselRef.value.setActiveItem(activeIndex.value-1)
}

function chooseMonth() {
  // cuteAudioRef.value.play()
  showEvent.value = true
  showEventBtn.value = false
  store.addTimes(activeIndex.value % 3 + 2)
}

function clickForward() {
  store.forward()
  cuteAudioRef.value.play()
}

function clickBackward() {
  store.backward()
  cuteAudioRef.value.play()
}

</script>

<template>
  <el-collapse-transition>
  <div style="margin-top: 20px">
    <audio ref="cuteAudioRef" src="/cute_touch.mp3" @ended="store.forward()"></audio>

      <div v-show="!showEvent">
        <el-row justify="center">
          <el-text class="mx-1" type="success" align="ce">公主，请选择一个月份</el-text>
        </el-row>

        <el-carousel ref="carouselRef" type="card" height="200px" arrow="always" :autoplay="false" direction="vertical" >
          <el-carousel-item v-for="(v,i) in events" :key="i" style="background: #79bbff">
            {{i+1}}月
          </el-carousel-item>
        </el-carousel>
        <el-row justify="center" style="margin-top: 15px; margin-bottom: 15px">
          <el-col :span="18">
            <el-slider v-model="activeIndex" @change="update" :min="1" :max="12" />
          </el-col>
        </el-row>
      </div>


    <el-row>

        <div v-show="showEvent">
          <el-text class="mx-1"> 2023年{{activeIndex}}月不仅发生了:</el-text>
          <el-card v-for="(v,i) in events[activeIndex-1]">
            {{v}}
          </el-card>
          <el-text class="mx-1">同时还为你带来了</el-text> <el-text class="mx-1" type="danger">{{ activeIndex % 3 + 2 }} 份福袋</el-text>
        </div>
    </el-row>

    <el-row justify="end" style="margin-top: 5px">
      <el-col style="right: 0; position: absolute">
          <el-button v-if="showEventBtn" type="success" @click="chooseMonth">确认</el-button>
          <el-button v-else type="success" @click="clickForward">下一步</el-button>
      </el-col>
    </el-row>
  </div>
  </el-collapse-transition>
</template>

<style scoped>
.el-carousel-item {
  background: #b3e19d;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>